<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../lib/vue.min.js"></script>
    <link rel="stylesheet" href="../../lib/bootstrap.css">
    <title>品牌案例</title>
</head>
<body>
    <div id="app">
        <!-- 输入框 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline ">
                <label>ID:</label>
                <input type="input" class="form-control" v-model="id">
                <label>Name:</label>
                <input type="input" class="form-control" v-model="name" @keyup.enter="addValue">
                
                <input type="botton" class="btn btn-primary" style="width: 80px;" value="添加" @click="addValue">
                <label>搜索:</label>
                <input type="input" class="form-control" v-model="keyWords">
            </div>
        </div>
    
        <!-- 表格 -->
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>name</th>
                    <th>time</th>
                    <th>option</th>
                </tr>
            </thead>
            <tbody>
                <tr  v-for="(item,index) in searchWords(keyWords)" :key="item.id">
                    <td v-text="item.id"></td>
                    <td v-text="item.name"></td>
                    <td>{{item.time | dateFormate}}</td>
                    <td class="btn-delete" @click="deleteValue(item.id)">删除</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        /* 定义一个全局过滤器，那么只要是vue的实力，就可以使用该全局过滤器 */
        Vue.filter('dateFormate',function(date) {
           let dt =  new Date(date)
           let year = dt.getFullYear()
           let month = (dt.getMonth() + 1).toString().padStart(2,'0')
           let day = dt.getDate().toString().padStart(2,'0')
           let H = dt.getHours().toString().padStart(2,'0')
           let M = dt.getMinutes().toString().padStart(2,'0')
           let S = dt.getSeconds().toString().padStart(2,'0')
           return `${year}年${month}月${day}日 ${H}:${M}:${S}`
        })
        let vm = new Vue({
            el: '#app',
            data: {
                keyWords: '',
                id: null,
                name: '',
                tableList: [
                    {
                        id: 1,
                        name: '李白',
                        time: new Date()
                    },
                    {
                        id: 2,
                        name: '杜甫',
                        time: new Date()
                    },
                    {
                        id: 3,
                        name: '特朗普',
                        time: new Date()
                    },
                ]
            },
            /* 定义局部过滤器，只有该实例可用 */
            filters: {
                dateFormate (date){
                    let dt =  new Date(date)
                    let year = dt.getFullYear()
                    let month = (dt.getMonth() + 1).toString().padStart(2,'0')
                    let day = dt.getDate().toString().padStart(2,'0')
                    let H = dt.getHours().toString().padStart(2,'0')
                    let M = dt.getMinutes().toString().padStart(2,'0')
                    let S = dt.getSeconds().toString().padStart(2,'0')
                    return `${year}-${month}-${day} ${H}:${M}:${S}`
                }
            },
            methods: {
                searchWords(keyWords) {
                   return this.tableList.filter(item => {
                        if (item.name &&　item.name.includes(keyWords)) {
                            return item
                        }
                    })
                },
                addValue() {
                    let inputItem = {
                        id: this.id,
                        name: this.name,
                        time: new Date()
                    }
                    if (this.id && this.name) {
                        this.tableList.push(inputItem)
                        this.id = this.name = null
                    }
                },
                deleteValue(id) {
                    this.tableList.some((item,index) => {
                        if (item.id === id) {
                            this.tableList.splice(index,1)
                            return true
                        }
                    })
                }
            }
        })

    </script>
    <style>
        .btn-delete {
            color: blue;
        }
        .btn-delete:hover {
            cursor: pointer;
        }
    </style>
</body>
</html>